<template>
  <div>
    <el-card>
      <!-- 标签区域 -->
      <div class="list-tag mtop-10">
        <div class="layer-wrapper">
          <button class="tag-btn circle-btn" @click="openLayer">
            {{ tagBtn }} <i class="el-icon-arrow-right"></i>
          </button>
          <!-- 全部标签弹出层 -->
          <div class="layer" v-show="showLayer" ref="layerRef">
            <div class="h-80">
              <button
                class="no-btn"
                :class="{ isActive: currenTagId === 0 }"
                @click="selectAll"
              >
                全部视频
              </button>
            </div>
            <div class="div-line"></div>
            <ul class="tag-list">
              <li v-for="(a, index) in allTagList" :key="a.id">
                <button
                  @click="selectAllTag(a.id, index)"
                  class="no-btn"
                  :class="{ isActive: a.selectTab }"
                >
                  {{ a.name }}
                </button>
              </li>
            </ul>
          </div>
        </div>
        <!-- 热门标签 -->
        <div class="tag-ul">
          <li
            class="mright-5 font-12"
            v-for="(h, index) in hotTagList"
            :key="h.id"
            :class="{ isActive: h.selectTab }"
            @click="selectHotTag(h.id, index)"
          >
            {{ h.name }}
          </li>
        </div>
      </div>
      <!-- 内容 -->
      <VideoList
        :list="videoList"
        :disable="disabled"
        @loadMore="load"
      ></VideoList>
    </el-card>
  </div>
</template>

<script>
import {
  getVideoAllTag,
  getVideoHotTag,
  getVideoByTab,
  getAllVideo,
} from "@/api/request";
import VideoList from "@/components/list/VideoList.vue";
export default {
  components: { VideoList },
  data() {
    return {
      tagBtn: "全部视频",
      hotTagList: [],
      allTagList: [],
      videoList: [],
      listType: "video",
      currenTagId: 0,
      mode: "first",
      showLayer: false,
      isLoading: false,
      hasmore: true, //是否还有视频没有加载
      offset: 0,
    };
  },
  created() {
    this.getHotTag();
    this.getVideo();
  },
  computed: {
    disabled() {
      return this.loading || !this.hasmore;
    },
  },
  methods: {
    //获取热门标签
    async getHotTag() {
      const { data: res } = await getVideoHotTag();
      if (res.code !== 200) return;
      this.hotTagList = res.data;
    },
    // 点击热门标签
    selectHotTag(id, index) {
      if (id == 1000) {
        this.listType = "mv";
      } else {
        this.listType = "video";
      }
      this.hotTagList.forEach((item) => {
        item.selectTab = false;
      });
      this.hotTagList[index].selectTab = true;
      this.tagBtn = this.hotTagList[index].name;
      this.currenTagId = id;
      this.mode = "first";
      this.getVideo();
    },
    //获取全部标签
    async getAllTag() {
      if (this.allTagList.length !== 0) return;
      const { data: res } = await getVideoAllTag();
      if (res.code !== 200) return;
      this.allTagList = res.data;
      this.allTagList.forEach((item) => {
        if (item.id == this.currenTagId) {
          item.selectTab = true;
        }
      });
    },
    async getVideo() {
      if (this.isLoading) return
      this.isLoading = true
      if (this.mode == 'first') this.offset = 0
      /* 全部视频 */
      if (this.currenTagId == 0) {
        const {data:res} = await getAllVideo(this.offset)
        if (res.code !== 200) return
        if (this.mode == 'first') {
          this.videoList = res.datas
          this.hasMore = res.hasmore
          if (this.videoList.length === 0)
            this.$message.error('暂时没有推荐视频，请稍后再试')
        } else {
          this.videoList.push(...res.datas)
        }
        this.hasmore = res.hasmore;
      } else {
        /* 根据标签查 */
        const {data:res} = await getVideoByTab(this.currenTagId, this.offset)
        if (res.code !== 200) return
        if (this.mode == 'first') {
          this.videoList = res.datas
          this.hasmore = res.hasmore
        } else {
          this.videoList.push(...res.datas)
          this.hasmore = res.hasmore
        }
      }
      this.isLoading = false
    },
    // 选择全部视频
    selectAll() {
      this.tagBtn = "全部视频";
      this.showLayer = false;
      this.currenTagId = 0;
      this.mode = "first";
      window.removeEventListener("click", this.closeLayer);
      this.getVideo();
    },
    //点击弹出
    openLayer() {
      if (this.showLayer) return;
      this.getAllTag();
      this.showLayer = true;
      setTimeout(() => {
        window.addEventListener("click", this.closeLayer);
      }, 100);
    },
    closeLayer(e) {
      if (!this.$refs.layerRef) return;
      if (!this.$refs.layerRef.contains(e.target)) {
        console.log("触发了关闭");
        this.showLayer = false;
        window.removeEventListener("click", this.closeLayer);
      }
    },
    //在弹出层访问标签
    selectAllTag(id, index) {
      if (id === 1000) {
        this.listType = "mv";
      } else {
        this.listType = "video";
      }
      this.allTagList.forEach((item) => {
        item.selectTab = false;
      });
      this.hotTagList.forEach((item) => {
        this.selectTab = false;
        if (item.id == id) {
          item.selectTab = true;
        }
      });
      this.allTagList[index].selectTab = true;
      this.tagBtn = this.allTagList[index].name;
      this.showLayer = false;
      window.removeEventListener("clikc", this.closeLayer);
      this.currenTagId = id;
      this.mode = "first";
      this.getVideo();
    },
    load(size) {
      if (this.isLoading) return;
      if (!this.hasmore) return this.$message.error("没有更多了");
      this.offset = size + 8;
      this.mode = "more";
      this.getVideo();
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  height: 1000px;
}
.list-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tag-ul {
    display: flex;
    height: 26px;
    li {
      height: 26px;
      line-height: 26px;
      padding: 0 10px;
      cursor: pointer;
    }
  }
}
.tag-btn {
  color: #343434;
  border-color: #d8d8d8;
  padding: 0 30px;
  cursor: pointer;
  &:hover {
    background-color: #f2f2f2;
  }
}
.layer-wrapper {
  position: relative;
  .layer {
    position: absolute;
    width: 720px;
    top: 40px;
    left: 0px;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0 0 8px #e5e5e5;
    border-radius: 4px;
    font-size: 14px;
    min-height: 400px;
    height: 500px;
    overflow-y: scroll;
    .h-80 {
      line-height: 80px;
      padding-left: 20px;
    }
    .tag-list {
      display: flex;
      flex-wrap: wrap;
      width: 600px;
      margin: 0 auto;
      li {
        width: 100px;
        height: 25px;
        text-align: center;
        margin: 16px 0;
      }
    }
  }
}
.isActive {
  background-color: #f5f5f5;
  color: #ec4141;
  border-radius: 10px;
}
.no-btn {
  width: 100px;
  cursor: pointer;
  padding: 6px 10px;
  &:hover {
    color: #ec4141;
  }
}
</style>